/**
 * @fileName scripts/webapck.dev.js
 * @description development|开发环境
 * @param getBaseCfg |使用基础配置
 * @param {Object} merge |将多个 webpack 配置文件合并成一个
 */

const getBaseCfg = require('./webpack.base');
const { merge } = require('webpack-merge');
const path = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

// const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// const TerserPlugin = require('terser-webpack-plugin');
// const LodashWebpackPlugin = require('lodash-webpack-plugin');
const webpack = require('webpack');

module.exports = merge(getBaseCfg, {
  mode: 'development', // production\development
  optimization: {
    usedExports: true, // 开发模式development，配置tree shaking,开启失败了
  },
  devtool: 'eval-cheap-module-source-map',

  //警告 webpack 的性能提示
  plugins: [
    new ReactRefreshWebpackPlugin(),
    // TODO:lodash优化失败
    // new LodashWebpackPlugin({
    //   collections: true,
    //   paths: true,
    // }),
    // new webpack.ProvidePlugin({
    //   // 这样就能很好的与 tree shaking 配合，将 lodash library 中的其余没有用到的导出去除。
    //   get: ['lodash-es', 'get'],
    // }),
  ],

  devServer: {
    port: 8297,
    compress: false, //|压缩
    hot: true, //|热更新
    historyApiFallback: true, //| 解决404的问题
    static: {
      directory: path.join(__dirname, '../public'),
    },
  },
  // optimization: {
  //   minimizer: [
  //     new CssMinimizerPlugin({
  //       parallel: true, // 并行压缩
  //     }),
  //     new TerserPlugin({
  //       parallel: true, // 并行压缩
  //       terserOptions: {
  //         // compress:true
  //         compress: {
  //           pure_funcs: ['console.log', 'console.warn'], //去除
  //         },
  //       },
  //     }),
  //   ],
  //   splitChunks: {
  //     // 缓存配置
  //     chunks: 'async',
  //     minSize: 20000,
  //     minRemainingSize: 0, // 通过确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块， 'development' 模式 中默认为 0。对于其他情况，splitChunks.minRemainingSize 默认为 splitChunks.minSize 的值，因此除需要深度控制的极少数情况外，不需要手动指定它。
  //     minChunks: 1, // 共享模块至少被引用一次
  //     maxAsyncRequests: 30, // 按需加载时的最大并行请求数。
  //     maxInitialRequests: 30, // 入口点的最大并行请求数。
  //     enforceSizeThreshold: 50000,
  //     // 由于在这个示例中单个 HTML 页面有多个入口，所以添加了 optimization.runtimeChunk: 'single' 配置，否则可能会遇到 这个问题。查看 代码分割 章节了解更多细节
  //     // runtimeChunk: 'single',

  //     cacheGroups: {
  //       vendor: {
  //         priority: 10, // 一个模块可以属于多个缓存组。优化将优先考虑具有更高 priority（优先级）的缓存组。默认组的优先级为负，以允许自定义组获得更高的优先级（
  //         test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
  //         name: 'vendor',
  //         chunks: 'all',
  //       },
  //       // 创建一个 vendors chunk，其中包括整个应用程序中 node_modules 的所有代码。
  //       //  警告
  //       // 这可能会导致包含所有外部程序包的较大 chunk。建议仅包括你的核心框架和实用程序，并动态加载其余依赖项。
  //       vendors: {
  //         chunks: 'all', // 表示只从入口模块中进行代码分割。其他可选值包括 'async'（异步模块）和 'all'（所有模块）。
  //         priority: 1, // 一个模块可以属于多个缓存组。优化将优先考虑具有更高 priority（优先级）的缓存组。默认组的优先级为负，以允许自定义组获得更高的优先级（
  //         test: /[\\/]node_modules[\\/]/, // 当 webpack 处理文件路径时，它们始终包含 Unix 系统中的 / 和 Windows 系统中的 \。这就是为什么在 {cacheGroup}.test 字段中使用 [\\/] 来表示路径分隔符的原因。
  //         name: 'vendors',
  //         enforce: true, // 默认false 告诉 webpack 忽略 splitChunks.minSize、splitChunks.minChunks、splitChunks.maxAsyncRequests 和 splitChunks.maxInitialRequests 选项，并始终为此缓存组创建 chunk。
  //         // layer: (module) => {  // 按模块层将模块分配给缓存组。
  //         //   // 返回模块的层级名称
  //         //   if (module.resource.includes('node_modules')) {
  //         //     return 'vendors'; // 如果模块位于 node_modules，属于 vendor 层级
  //         //   } else {
  //         //     return 'default'; // 否则属于 default 层级
  //         //   }
  //         // },
  //         // reuseExistingChunk: true,// 默认true 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块。这可能会影响 chunk 的结果文件名。
  //       },

  //       default: {
  //         chunks: 'all', // 这个配置的目的是防止重复引用的代码被多次打包，而是将其放入一个共享的 chunk 中，以减小最终输出文件的大小。
  //         priority: -1, // 默认值为  -20
  //         name: 'default',
  //         minChunks: 2, // 表示一个模块至少被引用两次才会被拆分出来，也就是说，如果一个模块在两个或更多入口文件中被引用，它将被拆分出来并放入 'commons' chunk。
  //       },
  //     },
  //   },
  // },
});
